<template>
  <div class="list">
    <div
      style="width: 100%; height: 100px"
      shadow="hover"
      v-for="(item, index) in list"
      :key="index"
      class="card-item"
    >
      <div
        style="
          width: 40px;
          height: 100%;
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <el-icon color="#409efe" :size="24" v-if="item.icon">
          <Component :is="MapComponent[item.icon]" />
        </el-icon>
        <el-icon v-else :size="24" color="#409efe"><Document /></el-icon>
      </div>
      <div
        style="
          width: calc(100% - 40px - 120px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
        "
      >
        <el-text truncated style="width: 100%; height: 20px">
          {{ item.title }}
        </el-text>
        <el-text
          v-if="item.content && item.icon == 'Document'"
          line-clamp="2"
          style="width: 100%; height: calc(100% - 30px)"
          :innerHTML="item.content.replace(/<img\b[^>]*>/gi, '')"
        >
        </el-text>
      </div>
      <div
        style="
          width: 120px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          height: 100%;
        "
      >
        {{ new Date(item.updated_at).toLocaleDateString() }}
      </div>
    </div>
  </div>
</template>
<script setup>
import useNote from '@/hooks/useNote'
const { MapComponent } = useNote()
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>
<style scoped lang="scss">
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

.card-item {
  --el-card-border-color: var(--el-border-color-light);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-fill-color-blank);
  background-color: var(--el-card-bg-color);
  border: 1px solid var(--el-card-border-color);
  border-radius: var(--el-card-border-radius);
  color: var(--el-text-color-primary);
  overflow: hidden;
  transition: var(--el-transition-duration);
  padding: 10px;
  display: flex;
  align-items: center;
  &:hover {
    box-shadow: var(--el-box-shadow-light);
  }
}
</style>
